<template>
  <div id="main">

  </div>
</template>
  
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue'
import service from "../../../untils/service";

type EChartsOption = echarts.EChartsOption;


onMounted(() => {
  var chartDom = document.getElementById('main')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  var arr1:any = []
  var arr2:any = []
  service({
        url: "/data/simpleData",
    }).then(res => {
            if (res.data.code === "200") {
               let arr = res.data.data
               arr.forEach((item:any)=>{
                arr1.push(item.x)
                arr2.push(item.val)
               })
            }
        }).then(()=>{
          option && myChart.setOption(option)
        })


option = {
  xAxis: {
    type: 'category',
    data: arr1
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: arr2,
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option);
})

</script>
  
<style scoped>
#main {
  width: 1300px;
  height: 600px;
}
</style>